<template>
  <!-- 新建、编辑版块 -->
  <div class="module-edit-page">
    <div class="module-edit-wrapper">
      <div style="height: calc(100vh - 66px); overflow: auto;">
        <div class="task-name">
          <img @click="showCoverDialog" :src="'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/module/'+form.plateImg">
          <textarea v-model="form.plateName" placeholder="请输入版块名称" :disabled="!canEditModule" style="flex: 1; background:none; outline:none; border:none; overflow: auto; padding: 5px 10px;"></textarea>
        </div>
        <div class="form-item-wrapper" style="min-height:50px; height: auto;">
          <div class="form-label">
            <i class="el-icon-edit-outline"></i>版块简介
          </div>
          <div class="form-input" @click="showInfoDialog" style="min-height: 50px; line-height: 32px;">
            <span style="color: black; word-break:break-all; overflow: auto; white-space: normal; padding-top: 8px;" :style="{'color': form.plateInfo? 'black': '#C0C4CC'}">{{form.plateInfo? form.plateInfo: '请输入版块简介'}}</span>
          </div>
        </div>
        <div class="form-item-wrapper">
          <div class="form-label">
            <i class="el-icon-user"></i>版块管理员
          </div>
          <div class="form-input" @click="selectDingUsers('plateManagerIdArr','plateManagerName','plateManagerId', 'plateManagerAvator', 'plateManagerNameArr', 1)">
            <span :style="{'color': form.plateManagerNameArr.length > 0 ? 'black': '#C0C4CC'}">{{form.plateManagerNameArr.length > 0 ? form.plateManagerName: '选择版块管理员'}}</span>
          </div>
        </div>
        <div class="form-item-wrapper">
          <div class="form-label">
            <i class="el-icon-user"></i>版块观察者
          </div>
          <div class="form-input" @click="selectDingUsers('plateObserverIdArr','plateObserverName','plateObserverId', 'plateObserverAvator', 'plateObserverNameArr', 300)">
            <span :style="{'color': form.plateObserverNameArr.length > 0 ? 'black': '#C0C4CC'}">{{form.plateObserverNameArr.length > 0 ? form.plateObserverName: '选择版块观察者'}}</span>
          </div>
        </div>
        <div class="form-item-wrapper">
          <div class="form-label">
            <i class="el-icon-user"></i>项目管理员
          </div>
          <div class="form-input" @click="selectDingUsers('plateProjectManagerIdArr','plateProjectManagerName','plateProjectManagerId', 'plateProjectAvator', 'plateProjectManagerNameArr', 300)">
            <span :style="{'color': form.plateProjectManagerNameArr.length > 0? 'black': '#C0C4CC'}">{{form.plateProjectManagerNameArr.length > 0? form.plateProjectManagerName : '选择版块管理员'}}</span>
          </div>
        </div>
        <div class="form-item-wrapper">
          <div class="form-label">
            <i class="el-icon-view"></i>可见范围
          </div>
          <div class="form-input" @click="showTaskRangeDialog">
            <span style="color: black">{{form.plateRange === '1' ? '所有人' : '版块管理员、项目管理员、项目成员'}}</span>
          </div>
        </div>
        <div class="form-item-wrapper" v-if="canMoreEdit" @click="moreDialog = true">
          <div class="form-label">
            <i class="el-icon-more-outline"></i>更多选项
          </div>
          <div class="form-input">
            <span style="color: black"></span>
          </div>
        </div>
      </div>

      <div class="action-bar">
        <div @click="goBack">取消</div>
        <div @click="saveModule" :class="canEditModule ? '' : 'forbidden'">保存</div>
      </div>

      <!-- 选择图片 -->
      <el-dialog title="选择图片" :visible.sync="coverDialog"  width="80%" :append-to-body="true">
        <div class="cover-wrapper">
          <div v-for="cover in 15" :key="cover">
            <img @click="selectCover('icon-' + cover + '.png')" :src="'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/module/icon-' + cover + '.png'" style="width: 40px; height: 40px;display:block;border-radius: 3px;">
          </div>
        </div>
      </el-dialog>
      <div class="info-page" v-if="showInfo">
        <div class="mobile-input-wp">
          <el-input style="width: 100%;" autofocus="true" placeholder="请输入版块描述" @input="detectInput" rows="8" v-model="form.plateInfo" type="textarea"></el-input>
        </div>
        <div class="bottom-btn">
          <div @click="showInfo = false;">确定</div>
        </div>
      </div>
      <el-dialog title="选择版块可见范围" :visible.sync="taskRangeDialog"  width="80%" :append-to-body="true">
        <div class="task-range-wrapper">
          <div @click="selectTaskRange('1')" class="row" :class="form.plateRange === '1'? 'active' : ''">所有人</div>
          <div @click="selectTaskRange('2')" class="row" :class="form.plateRange === '2'? 'active' : ''">版块管理员、项目管理员、项目成员</div>
        </div>
      </el-dialog>
      <!-- 更多选项 -->
      <el-dialog title="更多选项" :visible.sync="moreDialog"  width="80%" :append-to-body="true">
        <div class="task-range-wrapper">
          <div @click="delModule" class="row">删除版块</div>
          <div @click="archive" class="row">归档版块</div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import dingMixin from  '@/mixins/ding'
import formUtil from '@/utils/formUtil'

export default {
  name: '',
  data () {
    return {
      coverDialog: false,
      showInfo: false,
      taskRangeDialog: false,
      moreDialog: false,
      form: {
        plateName: '',
        plateImg: '',
        plateInfo: '',
        plateRange: '',
        plateManagerId: '',
        plateManagerName: '',
        plateManagerNameArr: [],
        plateManagerIdArr: [],
        plateManagerAvator: [],
        plateObserverId: '',
        plateObserverName: '',
        plateObserverAvator: [],
        plateObserverIdArr: [],
        plateObserverNameArr: [],
        plateProjectManagerId: '',
        plateProjectManagerName: '',
        plateProjectAvator: [],
        plateProjectManagerNameArr: [],
        plateProjectManagerIdArr: [],
        plateStatus: ''
      },
    };
  },
  components: {},
  mixins: [dingMixin],
  computed : {
    canEditModule() {
      return (this.form.hasPlateAuthority === '1' && this.form.plateStatus === '2' && this.form.id) || !this.form.id
    },
    canMoreEdit() {
      return this.form.hasPlateAuthority === '1' && this.form.plateStatus === '2' && this.form.id
    },
  },
  mounted () {
    this.init(this.$route.params.moduleId)
  },
  methods: {
    detectInput() {
      if(this.form.plateInfo.charAt(this.form.plateInfo.length - 1) === '@'){
        this.complexPicker(1).then((data)=>{
          this.form.plateInfo += data[0].name + ' '
        })
      }
    },
    async init(id) {
      if(id) {
        let editData = await this.$httpN.postB('division/plate/info', {id: id});
        editData.plateManagerNameArr = editData.plateManagerName.split(',');
        editData.plateManagerIdArr = editData.plateManagerId.split(',');
        editData.plateManagerAvator = editData.plateManagerAvatar.split(',');
        editData.plateProjectManagerNameArr = editData.plateProjectManagerName.split(',');
        editData.plateProjectManagerIdArr = editData.plateProjectManagerId.split(',');
        editData.plateProjectAvator = editData.plateProjectManagerAvatar.split(',');
        editData.plateObserverNameArr = editData.plateObserverName === '' ? [] : editData.plateObserverName.split(',');
        editData.plateObserverIdArr = editData.plateObserverId === '' ? [] : editData.plateObserverId.split(',');
        editData.plateObserverAvator = editData.plateObserverAvatar === '' ? [] : editData.plateObserverAvatar.split(',');
        this.form = editData;
      } else {
        formUtil.resetData(this.form);
        this.form.plateImg = 'icon-1.png';
        this.form.plateRange = '1';
        this.form.plateStatus = '2'
      }
    },
    showCoverDialog() {
      if (this.canEditModule) this.coverDialog = true;
    },
    selectCover(img) {
      this.coverDialog = false;
      this.form.plateImg = img
    },
    showInfoDialog() {
      if (this.canEditModule) this.showInfo = true;
    },
    showTaskRangeDialog() {
      if (this.canEditModule) this.taskRangeDialog = true;
    },
    selectDingUsers(ids, name, idsStr, avator, names, num){
      if (!this.canEditModule) return
      this.complexPicker(num, [], this.form[ids]).then((data)=>{
        this.form[ids] = data.map(item => item.emplId);
        this.form[avator] = data.map(item => item.avatar);
        this.form[names] = data.map(item => item.name);
        this.form[name] = this.form[names].join(',');
        this.form[idsStr] = this.form[ids].join(',');
      })
    },
    selectTaskRange (type) {
      this.form.plateRange = type;
      this.taskRangeDialog = false;
    },
    async archive() {
      this.mobileConfirm('是否将此版块归档?', async ()=> {
        if(!await this.$httpN.postB('division/plate/archive', {id: this.form.id}, false)) return;
        this.mobileMessage('归档成功');
        window.NEEDREFRESH = true;
        this.$router.replace({name: 'mlivolobim-module'})
      })
    },
    async delModule() {
      this.mobileConfirm('您确定要删除此版块吗', async ()=> {
        if(!await this.$httpN.postB('division/plate/delete', {id: this.form.id}, false)) return;
        this.mobileMessage('删除成功');
        window.NEEDREFRESH = true;
        this.$router.replace({name: 'mlivolobim-module'})
      })
    },
    goBack() {
      this.$router.go(-1)
    },
    async saveModule() {
      if(!this.canEditModule) return this.mobileAlert('您没有操作权限');
      if(!this.form.plateName) return this.mobileAlert('请输入版块名称');
      if(this.form.plateName.length > 15) return this.mobileAlert('版块名称不要超过15个字');
      if(!this.form.plateInfo) return this.mobileAlert('请输入版块简介');
      if(!this.form.plateManagerId) return this.mobileAlert('请选择版块管理员');
      if(!this.form.plateProjectManagerId) return this.mobileAlert('请选择项目管理员');
      
      if(!await this.$httpN.postB(this.form.id ? 'division/plate/update' : 'division/plate/save', this.form)) return;
      this.mobileMessage('保存成功');
      window.NEEDREFRESH = true;
      this.goBack()
    },
  }
}
</script>

<style lang='scss' scoped>
.el-dialog__wrapper {
  .cover-wrapper{
    display: flex;
    flex-wrap: wrap;
    div{
      height: 40px;
      width: 40px;
      background: #E6A23C;
      color: white;
      line-height: 40px;
      text-align: center;
      font-size: 40px;
      position: relative;
      border-radius: 5px;
      margin: 5px;
    }
  }
  .task-range-wrapper {
    margin: -30px -20px 0 -20px;
    .row {
      padding: 0 20px;
      height: 40px;
      line-height: 40px;
    }
    .active {
      color: #409EFF;
    }
  }
}
.module-edit-page {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 101;
  background: white;
  overflow: auto;
  .module-edit-wrapper {
    position: relative;
    height: 100%;
    padding: 16px;
    .task-name{
      position: relative;
      height: 90px;
      border-bottom: 1px solid #e7e5e5;
      padding-left: 105px;
      padding-top: 5px;
      img{
        width: 70px;
        height: 70px;
        border-radius: 3px;
        position: absolute;
        top:5px;
        left:20px;
      }
      textarea{
        width: 100%;
        height: 80px;
        border: none;
        outline: none;
        resize:none;
      }
    }
    .form-item-wrapper{
      width: 100%;
      height: 50px;
      border-bottom: 1px solid #e7e5e5;
      line-height: 50px;
      display: flex;
      flex-wrap: wrap;
      justify-content:space-between;
      align-content: flex-start;
      .form-label{
        width: 110px;
        height: 50px;
        color: #909399;
        i{
          margin-right: 3px;
        }
      }
      .form-input{
        width: calc(100% - 110px);
        color: #C0C4CC;
        flex: 1;
        input{
          width: 100%;
          height: 90%;
          border: 0;
          outline: none;
        }
        span {
          display: inline-block;
          width: 100%;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
      }
      .fileitem{
        line-height: 32px;
        margin-bottom: 5px;
        background: #F5F5F5;
        padding-left:10px;
        font-size: 12px;
        color: #606266;
        .uploadtip{
          float:right;
          margin-right: 20px;
          cursor: pointer;
        }
      }
    }
    .action-bar{
      position: absolute;
      line-height: 50px;
      width: 100%;
      bottom: 0;
      left: 0;
      display:flex;
      text-align: center;
      div{
        flex:1;
        font-size: 16px;
      }
      >div:first-child{
        background: #F2F2F2;
        color: #909399;
      }
      >div:last-child{
        color: white;
        background: #639efc;
      }
      >div.forbidden {
        background-color: #909399;
        color: #FFF;
      }
    }
  }
  .info-page{
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background: white;
    padding: 16px;
    .bottom-btn{
      position: absolute;
      bottom: 0;
      right:0;
      width: 100%;
      display: flex;
      div{
        flex:1;
        text-align: center;
        line-height: 50px;
        color:white;
        background: #639EFC;
      }
    }
    .task-info{
      textarea{
        width: 100%;
        height: 250px;
        border: none;
        outline: none;
        resize:none;
        background: #F9F9F9;
        padding: 10px;
      }
    }
  }
}
</style>